<template>
  <el-dialog class="dia-style" :title="title" :visible.sync="open" width="60%" :close-on-click-modal="false">
    <el-table :data="roleList" :height="400" :header-cell-style="{ background: '#F3F5FC' }">
      <el-table-column label="序号" align="center" width="120">
        <template slot-scope="scop">
          {{ scop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="Key(键)" prop="dictKey" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isNew == true" v-model="scope.row.dictKey" placeholder="请输入内容" maxlength="100" />
          <span v-else>{{ scope.row.dictKey }}</span>
        </template>
      </el-table-column>
      <el-table-column label="value(值)" prop="dictValue" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isNew == true" v-model="scope.row.dictValue" placeholder="请输入内容" maxlength="100" />
          <span v-else>{{ scope.row.dictValue }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字典编码" prop="dictCode" :show-overflow-tooltip="true" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            :disabled="scope.$index == 0"
            size="mini"
            type="text"
            @click="moveUp(scope.row, scope.$index)"
          >上移
          </el-button>

          <el-button
            :disabled="scope.$index == total - 1"
            size="mini"
            type="text"
            @click="moveDown(scope.row, scope.$index)"
          >下移
          </el-button>
          <el-button
            v-if="scope.row.isNew == true"
            size="mini"
            type="text"
            @click="handleDelete(scope.$index)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      style="border: 1px dashed #2979ff; width: 100%"
      icon="el-icon-plus"
      @click="handleAddRow"
    >新增一行</el-button>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMoreDict, dictValue } from '@/api/milkyway/ruleDict'
export default {
  name: 'UpholdDialog',
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    },
    dictCode: {
      type: String,
      default() {
        return ''
      }
    },
    groupType: {
      type: String || Number,
      default() {
        return 1
      }
    }
  },
  data() {
    return {
      // 是否打开
      open: false,
      // 列表
      roleList: []
    }
  },
  computed: {
    // 总数
    total() {
      return this.roleList.length
    }
  },

  methods: {
    // 打开页面
    show() {
      this.open = true
      this.getList()
    },
    /** 查询列表 */
    getList() {
      dictValue(this.id).then((res) => {
        res.forEach((item, index) => {
          item.sort = index
        })
        this.roleList = res
      })
    },
    // 保存按钮
    submitForm() {
      addMoreDict(this.roleList).then((res) => {
        this.$message.success('保存成功')
        this.open = false
      })
    },
    // 取消
    cancel() {
      this.open = false
    },
    // 删除数据
    handleDelete(index) {
      this.roleList.splice(index, 1)
    },
    // 增加数据
    handleAddRow() {
      this.roleList.push({
        isNew: true,
        parentId: this.id,
        isLeaf: 2,
        dictCode: this.dictCode,
        sort: this.roleList.length + 1,
        type: this.groupType
      })
    },
    // 上移
    moveUp(row, idx) {
      row.sort -= 2
      const lose = this.roleList.splice(idx - 1, 1)

      this.roleList.splice(idx, 0, lose[0])
    },
    // 下移
    moveDown(row, idx) {
      row.sort += 2
      const lose = this.roleList.splice(idx + 1, 1)
      this.roleList.splice(idx, 0, lose[0])
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table{
    margin-top:0px !important;
  }
  .el-dialog__body {
    min-height: 500px;
    overflow: auto;
  }
}
</style>
